<template>
  <div class="app-basement footBackground" v-if="!http.includes('6868618')">
    <div class="content-basement">
      <div class="footContent">
        <div class="footContent-item1">
          <span>
            {{ qyname.split("/")[0]
            }}{{ qyname.includes("/") ? qyname.split("/")[1] : "" }}
          </span>
          <el-menu
            :default-active="actives"
            mode="horizontal"
            @select="handleSelect"
            background-color="#0841FF"
            text-color="#eee"
            active-text-color="#fff"
          >
            <el-menu-item index="1">网站首页</el-menu-item>
            <el-menu-item index="2">在线练习</el-menu-item>
            <el-menu-item index="3">模拟考试</el-menu-item>
            <el-menu-item index="4">培训学习</el-menu-item>
            <el-menu-item index="5">政策法规</el-menu-item>
            <el-menu-item index="6">培训公告</el-menu-item>
            <el-menu-item index="7">联系我们</el-menu-item>
            <!-- <el-menu-item index="8">考试计划</el-menu-item>
                    <el-menu-item index="9">证明打印</el-menu-item> -->
            <el-menu-item index="10">在线报名</el-menu-item>
          </el-menu>
        </div>
        <div class="footContent-item2">
          <img
            :src="url"
            alt=""
            v-if="url && url != 'undefined' && url != 'null'"
            style="height: 100%"
          />
          <!-- <img src="@/assets/logo.png" alt=""> -->
        </div>
      </div>
      <div class="copy">
        Copyright &copy; 2020-2023.All Rights Reserved. 鲁ICP备14014132号-5
        <span v-if="http.indexOf('sddl') == -1">
          本平台由<a href="http://www.taijieyun.com" style="color: #fff"
            >泰捷云学</a
          >提供技术支持
        </span>
      </div>
    </div>
  </div>
  <div v-else>
    <div class="copy" style="color: #333">
      Copyright &copy; 2020-2023.All Rights Reserved.
      <a
        style="color: #333"
        target="_blank"
        href="https://beian.miit.gov.cn/#/Integrated/index"
        >鲁ICP备19031581号-5</a
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      qyname: "",
      actives: "1",
      url: "",
    };
  },
  watch: {
    active(val) {
      this.actives = val;
    },
  },
  computed: {
    ...mapGetters(["init", "http", "active"]),
  },
  created() {
    this.actives = this.active;
    this.qyname = this.init.alias;
    this.url = JSON.parse(this.init.setting).srcMa; //二维码
  },
  methods: {
    handleSelect(key) {
      this.$store.commit("SET_ACTIVE", key);
      // return
    },
  },
};
</script>

<style lang="scss" scoped>
.footBackground {
  background: url("~@/assets/footer.png") no-repeat;
  height: 304px;
  background-position: center !important;
  // display: flex;
  // flex-direction: column;
  .footContent {
    display: flex;
    align-items: center;
    height: 70%;
    justify-content: space-around;
    // 184
    .footContent-item1 {
      display: flex;
      flex-direction: column;
      span {
        font-size: 18px;
        color: #eee;
        margin-bottom: 24px;
      }
    }
    .footContent-item2 {
      display: flex;
      height: 100px;
      width: 225px;
      justify-content: space-around;
    }
  }
}
.copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #eee;
  height: 30%;
}
.el-menu.el-menu--horizontal {
  border: none;
}
</style>